import React, { useEffect, useState } from 'react';
import { NavBar, Cell, Input, Button, Toast } from 'zarm';
import { ArrowLeft } from '@zarm-design/icons';
import s from './style.module.less'
import ReactFileReader from 'react-file-reader'
import { get, post } from '@/utils'


// import { Button  } from '@zarm-design/icons';

const cUserInfo = () => {
    const [username, setUsername] = useState({});
    const [avatar, setAvatar] = useState('')
    const [sign, setSign] = useState('')

    useEffect(() => {
        getUserInfo()
    }, [])

    const getUserInfo = async () => {
        // 获取到用户信息，用来展示
        const { data } = await get('/api/user/showUserMsg')
        setUsername(data.userInfoMsg.username)
        setAvatar(data.userInfoMsg.avatar)
        setSign(data.userInfoMsg.sign)
    }

    const handleFiles = (files) => {
        setAvatar(files.base64)
    }

    const save = async () => {
        console.log('准备提交',{
            // 准备的索引       
            username: username,
            sign: sign
        });

        // 上传全新的用户数据
        const { data } = await post('/api/user/alterUserInfo', {
            // 准备的索引       
            username: username,
            // 修改项
            avatar: avatar,
            sign: sign
        })
        window.history.back()
    }


    return (
        <div className={s.cUserInfo}>
            <NavBar
                left={<ArrowLeft theme="primary" onClick={() => window.history.back()} />}
                title="用户信息"
            />
            <div className={s.headerText}>
                个人资料
            </div>
            <div className={s.title}>
                头像
            </div>
            <div className={s.avatar}>

                {/* 上传头像的地方 */}
                <img className={s.avatarUrl} src={avatar ? avatar : '@/static/游客.png'} alt="" />
                <div className={s.desc}>
                    <span>支持 jpg、png、jpeg 格式大小 200KB 以内的图片</span>
                    <ReactFileReader
                        fileTypes={[".png", ".jpg", ".gif", "jpeg"]}
                        base64
                        multipleFiles={!1}
                        handleFiles={handleFiles}
                    >
                        <Button>
                            选择文件
                        </Button>
                    </ReactFileReader>
                </div>



            </div>
            <div className={s.sign}>
                <Cell>
                    <Input
                        rows={3}
                        type="text"
                        placeholder="请输入个性签名"
                        value={sign}
                        onChange={value => { setSign(value) }}
                    />
                </Cell>
            </div>
            <div className={s.save}>
                <Button onClick={save} className={s.save} block theme='primary'>保存</Button>
            </div>

        </div>
    )
}
export default cUserInfo;
